import React, { useEffect, useState } from 'react'
import { Row, Col, Form, Input, Typography, Select, Button, Table, Tag, Popconfirm, Tooltip } from "antd"
import { DeleteOutlined, FormOutlined, FileSearchOutlined } from '@ant-design/icons';
import myinfo from '../../mobx/info'
import { observer } from 'mobx-react'

import moment from 'moment'
import { ajax } from '../../api';
const { Title } = Typography
const { Column, ColumnGroup } = Table;
function Freelist({history}:any) {
    const [flag,setFlag]=useState<boolean>(false)


    const { freeList, getFreeListAsync,getFreeList ,userInfo} = myinfo
    useEffect(() => {
        getFreeListAsync({})//传个空对象初始化执行
        if(userInfo.role>3){
            setFlag(true)
        }
    }, [])


    const confirm = async (item: any, index: any) => {
        let { code, result }: any = await ajax.deleteshoufei({ _id: item._id })
        if (code == 200) {
            freeList.splice(index, 1);
            getFreeList([...freeList])
        }
    }
    const gotoEditFree = (item:any)=>{
            history.push('/main/free/edit/'+item._id)
    }
 
    return (
        <div>
            <Title level={4}>中海物业收费项目</Title>
            <Row>
                <Col span={20}>
                    <Table
                        dataSource={freeList}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={(item: any) => item._id}
                    >

                        <Column title="收费项目" align='center' dataIndex="title" key="title"
                            render={(text) => (
                                <b>{text}</b>
                            )}
                        />

                        <Column title="收费标准" align='center' dataIndex="content" key="content"
                            render={(text) => (
                                <b>{text}</b>
                            )}
                        />

                        <Column title="备注" align='center' dataIndex="remarks" key="remarks"
                            render={(text) => (
                                <b>{text}</b>
                            )}
                        />

                        <Column
                            title="发布时间"
                            dataIndex="time"
                            key="time"
                            align='center'
                            render={(text, item, index) => (
                                <p>{moment(text).format('YYYY-MM-DD HH:MM')}</p>
                            )}
                        />



                       {
                           flag&& <Column
                           title="操作"
                           align='center'
                           render={(text, item: any, index: any) => (
                               <div>
                                   <Popconfirm
                                       title="你确定要删除吗?"
                                       onConfirm={() => confirm(item, index)}
                                       okText="确定"
                                       cancelText="不了吧"

                                   >
                                       <Button danger shape="circle" icon={<DeleteOutlined />} size="small" />
                                   </Popconfirm>


                                   <Tooltip placement='top' title={'编辑'}>
                                       <Button onClick={()=>gotoEditFree(item)} style={{ margin: '0 5px' }} type="primary" shape="circle" icon={<FormOutlined />} size="small" />
                                   </Tooltip>
                               </div>
                           )}
                       />
                       }
                    </Table>
                </Col>
            </Row>
        </div>
    )
}
export default observer(Freelist)
